---
export const prerender = true;

import { getCollection, getEntryBySlug } from "astro:content";
import DefaultPageLayout from "$/layouts/default.astro";
import PostLayout from "$/layouts/post.astro";
import PostPreviewList from "$/components/PostPreviewList.astro";
import Prose from "$/components/Prose.astro";
import { Content as AboutAstroInk } from "./_home_intro.md";

import Code from "../components/Code.astro";

const title = "Home";
const description =
  "Astro-Ink is a crisp, minimal, personal blog theme for Astro";

let posts = await getCollection("blog");
posts = posts.sort((a, b) => new Date(b.data.date) - new Date(a.data.date));

let post = posts[0];

const { slug } = Astro.params;
const entry = post;

const { id, collection, data } = entry;
const { Content } = await entry.render();
---

<PostLayout meta={{ id, collection, slug }} content={data}>
  <Content
    components={{
      code: Code,
    }}
  />
</PostLayout>

<style>
  .hero {
    @apply flex flex-col md:flex-row gap-8 w-full transition-all pb-4;
  }
  .hero__face {
    @apply flex md:flex-none justify-center;
  }
  .hero__says {
    @apply flex-1 text-center md:text-left;
  }
  .author-card {
    @apply h-48 w-48 md:h-56 md:w-56;
  }
  .author-card img {
    @apply h-48 w-48 md:h-56 md:w-56;
  }
  .page__actions {
    @apply flex justify-center md:justify-end py-6;
  }
  .action__go-to-blog {
    @apply py-4 hover:underline;
  }
</style>
